<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/popover.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:52 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=dnd.html>← 6.11 Drag and drop</a> — <a href=index.html>Table of Contents</a> — <a href=browsers.html>7 Loading web pages →</a></nav><ol class=toc><li id=toc-editing><ol><li><a href=popover.html#the-popover-attribute><span class=secno>6.12</span> The <code>popover</code> attribute</a><ol><li><a href=popover.html#the-popover-target-attributes><span class=secno>6.12.1</span> The popover target attributes</a><li><a href=popover.html#popover-light-dismiss><span class=secno>6.12.2</span> Popover light dismiss</a></ol></ol></ol><h3 id=the-popover-attribute><span class=secno>6.12</span> The <code id=the-popover-attribute:attr-popover><a href=#attr-popover>popover</a></code> attribute<a href=#the-popover-attribute class=self-link></a></h3><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover title="The popover global attribute is used to designate an element as a popover element.">Global_attributes/popover</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 114+</span></span><span class="safari yes"><span>Safari</span><span>preview+</span></span><span class="chrome yes"><span>Chrome</span><span>114+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>114+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>All <a id=the-popover-attribute:html-elements href=infrastructure.html#html-elements>HTML elements</a> may have the <dfn data-dfn-for=html-global id=attr-popover data-dfn-type=element-attr><code>popover</code></dfn> content attribute set. When specified, the element
  won't be rendered until it becomes shown, at which point it will be rendered on top of other page
  content.</p>

  <div class=example>
   <p>The <code id=the-popover-attribute:attr-popover-2><a href=#attr-popover>popover</a></code> attribute is a global attribute that allows
   authors flexibility to ensure popover functionality can be applied to elements with the most
   relevant semantics.</p>

   <p>The following demonstrates how one might create a popover sub-navigation list of
   links, within the global navigation for a website.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>...</c-><c- p>&gt;</c->All Products<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>button</c-> <c- e>popovertarget</c-><c- o>=</c-><c- s>sub-nav</c-><c- p>&gt;</c->
     <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>down-arrow.png</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Product pages&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>ul</c-> <c- e>popover</c-> <c- e>id</c-><c- o>=</c-><c- s>sub-nav</c-><c- p>&gt;</c->
     <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>...</c-><c- p>&gt;</c->Shirts<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
     <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>...</c-><c- p>&gt;</c->Shoes<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
     <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>...</c-><c- p>&gt;</c->Hats etc.<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
    <c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- c>&lt;!-- other list items and links here --&gt;</c->
<c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p>When using <code id=the-popover-attribute:attr-popover-3><a href=#attr-popover>popover</a></code> on elements without accessibility
  semantics, for instance the <code id=the-popover-attribute:the-div-element><a href=grouping-content.html#the-div-element>div</a></code> element, authors should use the appropriate ARIA
  attributes to ensure the popover is accessible.</p>

  <div class=example>
   <p>The following shows the baseline markup to create a custom menu popover, where the first
   menuitem will receive keyboard focus when the popover is invoked due to the use of the
   <code>autofocus</code> attribute. Navigating the menuitems with arrow keys and
   activation behaviors would still need author scripting. Additional requirements for building
   custom menus widgets are defined in the <a href=https://w3c.github.io/aria/#menu>WAI-ARIA
   specification</a>.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>popovertarget</c-><c- o>=</c-><c- s>m</c-><c- p>&gt;</c->Actions<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>role</c-><c- o>=</c-><c- s>menu</c-> <c- e>id</c-><c- o>=</c-><c- s>m</c-> <c- e>popover</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>button</c-> <c- e>role</c-><c- o>=</c-><c- s>menuitem</c-> <c- e>tabindex</c-><c- o>=</c-><c- s>-1</c-> <c- e>autofocus</c-><c- p>&gt;</c->Edit<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>button</c-> <c- e>role</c-><c- o>=</c-><c- s>menuitem</c-> <c- e>tabindex</c-><c- o>=</c-><c- s>-1</c-><c- p>&gt;</c->Hide<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>button</c-> <c- e>role</c-><c- o>=</c-><c- s>menuitem</c-> <c- e>tabindex</c-><c- o>=</c-><c- s>-1</c-><c- p>&gt;</c->Delete<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c-></code></pre>

   <p>A popover can be useful for rendering a status message, confirming the action performed by
   the user. The following demonstrates how one could reveal a popover in an <code id=the-popover-attribute:the-output-element><a href=form-elements.html#the-output-element>output</a></code>
   element.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>id</c-><c- o>=</c-><c- s>submit</c-><c- p>&gt;</c->Submit<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>output</c-><c- p>&gt;&lt;</c-><c- f>span</c-> <c- e>popover</c-><c- o>=</c-><c- s>manual</c-><c- p>&gt;&lt;/</c-><c- f>span</c-><c- p>&gt;&lt;/</c-><c- f>output</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>const</c-> sBtn <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- u>&quot;submit&quot;</c-><c- p>);</c->
 <c- a>const</c-> outSpan <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- u>&quot;output [popover=manual]&quot;</c-><c- p>);</c->
 <c- a>let</c-> successMessage<c- p>;</c->
 <c- a>let</c-> errorMessage<c- p>;</c->

 <c- d>/* define logic for determining success of action</c->
<c- d>  and determining the appropriate success or error</c->
<c- d>  messages to use */</c->

 sBtn<c- p>.</c->addEventListener<c- p>(</c-><c- u>&quot;click&quot;</c-><c- p>,</c-> <c- p>()=&gt;</c-> <c- p>{</c->
  <c- k>if</c-> <c- p>(</c-> success <c- p>)</c-> <c- p>{</c->
   outSpan<c- p>.</c->textContent <c- o>=</c-> successMessage<c- p>;</c->
  <c- p>}</c->
  <c- k>else</c-> <c- p>{</c->
   outSpan<c- p>.</c->textContent <c- o>=</c-> errorMessage<c- p>;</c->
  <c- p>}</c->
  outSpan<c- p>.</c->showPopover<c- p>();</c->

  setTimeout<c- p>(</c-><c- a>function</c-> <c- p>()</c-> <c- p>{</c->
   outSpan<c- p>.</c->hidePopover<c- p>();</c->
  <c- p>},</c-> <c- mf>10000</c-><c- p>);</c->
 <c- p>});</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p class=note>Inserting a popover element into an <code id=the-popover-attribute:the-output-element-2><a href=form-elements.html#the-output-element>output</a></code> element will generally
  cause screen readers to announce the content when it becomes visible. Depending on the complexity
  or frequency of the content, this could be either useful or annoying to users of these
  assistive technologies. Keep this in mind when using the <code id=the-popover-attribute:the-output-element-3><a href=form-elements.html#the-output-element>output</a></code> element or other
  ARIA live regions to ensure the best user experience.</p>

  <p>The <code id=the-popover-attribute:attr-popover-4><a href=#attr-popover>popover</a></code> attribute is an <a id=the-popover-attribute:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated
  attribute</a> with the following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=html-global/popover id=attr-popover-auto data-dfn-type=attr-value><code>auto</code></dfn>
     <td rowspan=2><dfn id=attr-popover-auto-state>Auto</dfn>
     <td rowspan=2>Closes other popovers when opened; has <a href=#popover-light-dismiss id=the-popover-attribute:popover-light-dismiss>light
     dismiss</a> and responds to <a href=interaction.html#close-request id=the-popover-attribute:close-request>close requests</a>.
    <tr><td>(the empty string)
    <tr><td><dfn data-dfn-for=html-global/popover id=attr-popover-manual data-dfn-type=attr-value><code>manual</code></dfn>
     <td><dfn id=attr-popover-manual-state>Manual</dfn>
     <td>Does not close other popovers; does not <a href=#popover-light-dismiss id=the-popover-attribute:popover-light-dismiss-2>light
     dismiss</a> or respond to <a href=interaction.html#close-request id=the-popover-attribute:close-request-2>close requests</a>.
    <tr><td><dfn data-dfn-for=html-global/popover id=attr-popover-hint data-dfn-type=attr-value><code>hint</code></dfn><td><dfn id=attr-popover-hint-state>Hint</dfn><td>Closes other hint popovers when opened, but not other auto popovers; has <a href=#popover-light-dismiss id=the-popover-attribute:popover-light-dismiss-3>light dismiss</a> and responds to <a href=interaction.html#close-request id=the-popover-attribute:close-request-3>close requests</a>.</table>

  <p>The attribute's <i id=the-popover-attribute:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> is the <dfn id=attr-popover-none-state>No Popover</dfn> state, and its <i id=the-popover-attribute:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> is the <a href=#attr-popover-manual-state id=the-popover-attribute:attr-popover-manual-state>Manual</a>
  state.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover title="The popover property of the HTMLElement interface gets and sets an element's popover state via JavaScript (&quot;auto&quot; or &quot;manual&quot;), and can be used for feature detection.">HTMLElement/popover</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 114+</span></span><span class="safari yes"><span>Safari</span><span>17+</span></span><span class="chrome yes"><span>Chrome</span><span>114+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>114+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLElement id=dom-popover data-dfn-type=attribute><code>popover</code></dfn> IDL
  attribute must <a id=the-popover-attribute:reflect href=common-dom-interfaces.html#reflect>reflect</a> the <a href=#attr-popover id=the-popover-attribute:attr-popover-5>popover</a> attribute,
  <a id=the-popover-attribute:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>.</p>

  <p>Every <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-2>HTML element</a> has a <dfn id=popover-visibility-state data-export="">popover visibility
  state</dfn>, initially <a href=#popover-hidden-state id=the-popover-attribute:popover-hidden-state>hidden</a>, with these potential
  values:</p>

  <ul><li><p><dfn data-dfn-for="popover visibility state" id=popover-hidden-state data-export="">hidden</dfn><li><p><dfn data-dfn-for="popover visibility state" id=popover-showing-state data-export="">showing</dfn></ul>

  <p>Every <code id=the-popover-attribute:document><a href=dom.html#document>Document</a></code> has a <dfn id=popover-pointerdown-target>popover pointerdown target</dfn>, which is an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-3>HTML element</a> or null, initially null.</p>

  <p>Every <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-4>HTML element</a> has a <dfn id=popover-trigger>popover trigger</dfn>, which
  is an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-5>HTML element</a> or null, initially set to null.</p>

  <p>Every <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-6>HTML element</a> has a <dfn id=popover-showing-or-hiding>popover showing or
  hiding</dfn>, which is a boolean, initially set to false.</p>

  <p>Every <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-7>HTML element</a> <dfn id=popover-toggle-task-tracker>popover toggle task tracker</dfn>,
  which is a <a id=the-popover-attribute:toggle-task-tracker href=interaction.html#toggle-task-tracker>toggle task tracker</a> or null, initially null.</p>

  <p>Every <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-8>HTML element</a> has a <dfn id=popover-close-watcher>popover close watcher</dfn>,
  which is a <a id=the-popover-attribute:close-watcher href=interaction.html#close-watcher>close watcher</a> or null, initially null.</p>

  <p>Every <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-9>HTML element</a> has an <dfn id=opened-in-popover-mode>opened in popover
  mode</dfn>, which is a string or null, initially null.</p>

  <p>The following <a href=https://dom.spec.whatwg.org/#concept-element-attributes-change-ext id=the-popover-attribute:concept-element-attributes-change-ext data-x-internal=concept-element-attributes-change-ext>attribute change
  steps</a>, given <var>element</var>, <var>localName</var>, <var>oldValue</var>,
  <var>value</var>, and <var>namespace</var>, are used for all <a id=the-popover-attribute:html-elements-10 href=infrastructure.html#html-elements>HTML elements</a>:</p>

  <ol><li><p>If <var>namespace</var> is not null, then return.<li><p>If <var>localName</var> is not <code id=the-popover-attribute:attr-popover-6><a href=#attr-popover>popover</a></code>, then
   return.<li><p>If <var>element</var>'s <a href=#popover-visibility-state id=the-popover-attribute:popover-visibility-state>popover visibility state</a> is in the <a href=#popover-showing-state id=the-popover-attribute:popover-showing-state>showing state</a> and <var>oldValue</var> and <var>value</var>
   are in different <a href=#attr-popover id=the-popover-attribute:attr-popover-7>states</a>, then run the <a href=#hide-popover-algorithm id=the-popover-attribute:hide-popover-algorithm>hide popover
   algorithm</a> given <var>element</var>, true, true, false, and null.</ol>

  <dl class=domintro><dt><code><var>element</var>.<a href=#dom-showpopover id=dom-showpopover-dev>showPopover</a>()</code><dd>Shows the popover <var>element</var> by adding it to the top layer. If <var>element</var>'s
   <code id=the-popover-attribute:attr-popover-8><a href=#attr-popover>popover</a></code> attribute is in the <a href=#attr-popover-auto-state id=the-popover-attribute:attr-popover-auto-state>Auto</a> state, then this will also close all other <a href=#attr-popover-auto-state id=the-popover-attribute:attr-popover-auto-state-2>Auto</a> popovers unless they are an ancestor of
   <var>element</var> according to the <a href=#topmost-popover-ancestor id=the-popover-attribute:topmost-popover-ancestor>topmost popover ancestor</a> algorithm.<dt><code><var>element</var>.<a href=#dom-hidepopover id=dom-hidepopover-dev>hidePopover</a>()</code><dd>Hides the popover <var>element</var> by removing it from the top layer and applying
   <code>display: none</code> to it.<dt><code><var>element</var>.<a href=#dom-togglepopover id=dom-togglepopover-dev>togglePopover</a>()</code><dd>If the popover <var>element</var> is not showing, then this method shows it. Otherwise, this
   method hides it. This method returns true if the popover is open after calling it, otherwise
   false.</dl>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/showPopover title="The showPopover() method of the HTMLElement interface shows a popover element (i.e. one that has a valid popover attribute) by adding it to the top layer.">HTMLElement/showPopover</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 114+</span></span><span class="safari yes"><span>Safari</span><span>17+</span></span><span class="chrome yes"><span>Chrome</span><span>114+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>114+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLElement id=dom-showpopover data-dfn-type=method><code>showPopover(<var>options</var>)</code></dfn> method steps are:</p>

  <ol><li><p>Let <var>source</var> be <var>options</var>["<code id=the-popover-attribute:dom-showpopoveroptions-source><a href=dom.html#dom-showpopoveroptions-source>source</a></code>"] if it <a href=https://infra.spec.whatwg.org/#map-exists id=the-popover-attribute:map-exists data-x-internal=map-exists>exists</a>; otherwise, null.<li><p>Run <a href=#show-popover id=the-popover-attribute:show-popover>show popover</a> given <a id=the-popover-attribute:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, true, and
   <var>source</var>.</ol>

  <p>To <dfn id=show-popover>show popover</dfn>, given an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-11>HTML element</a>
  <var>element</var>, a boolean <var>throwExceptions</var>, and an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-12>HTML
  element</a> or null <var>source</var>:</p>

  <ol><li><p>If the result of running <a href=#check-popover-validity id=the-popover-attribute:check-popover-validity>check popover validity</a> given <var>element</var>,
   false, <var>throwExceptions</var>, and null is false, then return.<li><p>Let <var>document</var> be <var>element</var>'s <a id=the-popover-attribute:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p><a id=the-popover-attribute:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>element</var>'s <a href=#popover-trigger id=the-popover-attribute:popover-trigger>popover trigger</a> is null.<li><p><a id=the-popover-attribute:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>element</var> is not in <var>document</var>'s <a id=the-popover-attribute:top-layer href=https://drafts.csswg.org/css-position-4/#document-top-layer data-x-internal=top-layer>top
   layer</a>.<li><p>Let <var>nestedShow</var> be <var>element</var>'s <a href=#popover-showing-or-hiding id=the-popover-attribute:popover-showing-or-hiding>popover showing or
   hiding</a>.<li><p>Let <var>fireEvents</var> be the boolean negation of <var>nestedShow</var>.<li><p>Set <var>element</var>'s <a href=#popover-showing-or-hiding id=the-popover-attribute:popover-showing-or-hiding-2>popover showing or hiding</a> to true.<li>
    <p>Let <var>cleanupShowingFlag</var> be the following steps:</p>

    <ol><li><p>If <var>nestedShow</var> is false, then set <var>element</var>'s <a href=#popover-showing-or-hiding id=the-popover-attribute:popover-showing-or-hiding-3>popover showing
     or hiding</a> to false.</ol>
   <li><p>If the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-popover-attribute:concept-event-fire data-x-internal=concept-event-fire>firing an event</a> named <code id=the-popover-attribute:event-beforetoggle><a href=indices.html#event-beforetoggle>beforetoggle</a></code>, using <code id=the-popover-attribute:toggleevent><a href=interaction.html#toggleevent>ToggleEvent</a></code>, with the <code id=the-popover-attribute:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true, the <code id=the-popover-attribute:dom-toggleevent-oldstate><a href=interaction.html#dom-toggleevent-oldstate>oldState</a></code> attribute initialized to "<code>closed</code>", the <code id=the-popover-attribute:dom-toggleevent-newstate><a href=interaction.html#dom-toggleevent-newstate>newState</a></code> attribute
   initialized to "<code>open</code>", and the <code id=the-popover-attribute:dom-toggleevent-source><a href=interaction.html#dom-toggleevent-source>source</a></code> attribute initialized to <var>source</var> at
   <var>element</var> is false, then run <var>cleanupShowingFlag</var> and return.<li>
    <p>If the result of running <a href=#check-popover-validity id=the-popover-attribute:check-popover-validity-2>check popover validity</a> given <var>element</var>, false,
    <var>throwExceptions</var>, and <var>document</var> is false, then run
    <var>cleanupShowingFlag</var> and return.</p>

    <p class=note><a href=#check-popover-validity id=the-popover-attribute:check-popover-validity-3>Check popover validity</a> is called again because firing the <code id=the-popover-attribute:event-beforetoggle-2><a href=indices.html#event-beforetoggle>beforetoggle</a></code> event could have disconnected this element or
    changed its <code id=the-popover-attribute:attr-popover-9><a href=#attr-popover>popover</a></code> attribute.</p>
   <li><p>Let <var>shouldRestoreFocus</var> be false.<li><p>Let <var>originalType</var> be the current state of <var>element</var>'s <code id=the-popover-attribute:attr-popover-10><a href=#attr-popover>popover</a></code> attribute.<li><p>Let <var>stackToAppendTo</var> be null.<li><p>Let <var>autoAncestor</var> be the result of running the <a href=#topmost-popover-ancestor id=the-popover-attribute:topmost-popover-ancestor-2>topmost popover
   ancestor</a> algorithm given <var>element</var>, <var>document</var>'s <a href=#auto-popover-list id=the-popover-attribute:auto-popover-list>showing auto
   popover list</a>, <var>source</var>, and true.<li><p>Let <var>hintAncestor</var> be the result of running the <a href=#topmost-popover-ancestor id=the-popover-attribute:topmost-popover-ancestor-3>topmost popover
   ancestor</a> algorithm given <var>element</var>, <var>document</var>'s <a href=#showing-hint-popover-list id=the-popover-attribute:showing-hint-popover-list>showing hint
   popover list</a>, <var>source</var>, and true.<li>
    <p>If <var>originalType</var> is the <a href=#attr-popover-auto-state id=the-popover-attribute:attr-popover-auto-state-3>Auto</a> state,
    then:</p>

    <ol><li><p>Run <a href=#close-entire-popover-list id=the-popover-attribute:close-entire-popover-list>close entire popover list</a> given <var>document</var>'s <a href=#showing-hint-popover-list id=the-popover-attribute:showing-hint-popover-list-2>showing
     hint popover list</a>, <var>shouldRestoreFocus</var>, and <var>fireEvents</var>.<li><p>Let <var>ancestor</var> be the result of running the <a href=#topmost-popover-ancestor id=the-popover-attribute:topmost-popover-ancestor-4>topmost popover
     ancestor</a> algorithm given <var>element</var>, <var>document</var>'s <a href=#auto-popover-list id=the-popover-attribute:auto-popover-list-2>showing auto
     popover list</a>, <var>source</var>, and true.<li><p>If <var>ancestor</var> is null, then set <var>ancestor</var> to
     <var>document</var>.<li><p>Run <a href=#hide-all-popovers-until id=the-popover-attribute:hide-all-popovers-until>hide all popovers until</a> given
     <var>ancestor</var>, <var>shouldRestoreFocus</var>, and <var>fireEvents</var>.<li><p>Set <var>stackToAppendTo</var> to "<code>auto</code>".</ol>
   <li>
    <p>If <var>originalType</var> is the <a href=#attr-popover-hint-state id=the-popover-attribute:attr-popover-hint-state>Hint</a> state,
    then:</p>

    <ol><li>
      <p>If <var>hintAncestor</var> is not null, then:</p>

      <ol><li><p>Run <a href=#hide-all-popovers-until id=the-popover-attribute:hide-all-popovers-until-2>hide all popovers until</a> given
       <var>hintAncestor</var>, <var>shouldRestoreFocus</var>, and <var>fireEvents</var>.<li><p>Set <var>stackToAppendTo</var> to "<code>hint</code>".</ol>
     <li>
      <p>Otherwise:</p>

      <ol><li><p>Run <a href=#close-entire-popover-list id=the-popover-attribute:close-entire-popover-list-2>close entire popover list</a> given <var>document</var>'s <a href=#showing-hint-popover-list id=the-popover-attribute:showing-hint-popover-list-3>showing
       hint popover list</a>, <var>shouldRestoreFocus</var>, and <var>fireEvents</var>.<li>
        <p>If <var>autoAncestor</var> is not null, then:</p>

        <ol><li><p>Run <a href=#hide-all-popovers-until id=the-popover-attribute:hide-all-popovers-until-3>hide all popovers until</a> given
         <var>autoAncestor</var>, <var>shouldRestoreFocus</var>, and <var>fireEvents</var>.<li><p>Set <var>stackToAppendTo</var> to "<code>auto</code>".</ol>
       <li><p>Otherwise, set <var>stackToAppendTo</var> to "<code>hint</code>".</ol>
     </ol>
   <li>
    <p>If <var>originalType</var> is <a href=#attr-popover-auto-state id=the-popover-attribute:attr-popover-auto-state-4>Auto</a> or <a href=#attr-popover-hint-state id=the-popover-attribute:attr-popover-hint-state-2>Hint</a>, then:</p>

    <ol><li><p><a id=the-popover-attribute:assert-3 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>stackToAppendTo</var> is not null.<li>
      <p>If <var>originalType</var> is not equal to the value of <var>element</var>'s <code id=the-popover-attribute:attr-popover-11><a href=#attr-popover>popover</a></code> attribute, then:</p>

      <ol><li><p>If <var>throwExceptions</var> is true, then throw an
       <a id=the-popover-attribute:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-popover-attribute:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Return.</ol>
     <li>
      <p>If the result of running <a href=#check-popover-validity id=the-popover-attribute:check-popover-validity-4>check popover validity</a> given <var>element</var>,
      false, <var>throwExceptions</var>, and <var>document</var> is false, then run
      <var>cleanupShowingFlag</var> and return.</p>

      <p class=note><a href=#check-popover-validity id=the-popover-attribute:check-popover-validity-5>Check popover validity</a> is called again because running <a href=#hide-all-popovers-until id=the-popover-attribute:hide-all-popovers-until-4>hide all popovers until</a> above could have fired the
      <code id=the-popover-attribute:event-beforetoggle-3><a href=indices.html#event-beforetoggle>beforetoggle</a></code> event, and an event handler could have
      disconnected this element or changed its <code id=the-popover-attribute:attr-popover-12><a href=#attr-popover>popover</a></code>
      attribute.</p>
     <li>
      <p>If the result of running <a href=#topmost-auto-popover id=the-popover-attribute:topmost-auto-popover>topmost auto or hint
      popover</a> on <var>document</var> is null, then set <var>shouldRestoreFocus</var> to
      true.</p>

      <p class=note>This ensures that focus is returned to the previously-focused element only for
      the first popover in a stack.</p>
     <li>
      <p>If <var>stackToAppendTo</var> is "<code>auto</code>":</p>

      <ol><li><p><a id=the-popover-attribute:assert-4 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>document</var>'s <a href=#auto-popover-list id=the-popover-attribute:auto-popover-list-3>showing auto popover list</a> does
       not contain <var>element</var>.<li><p>Set <var>element</var>'s <a href=#opened-in-popover-mode id=the-popover-attribute:opened-in-popover-mode>opened in popover mode</a> to "<code>auto</code>".</ol>

      <p>Otherwise:</p>

      <ol><li><p><a id=the-popover-attribute:assert-5 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>stackToAppendTo</var> is "<code>hint</code>".<li><p><a id=the-popover-attribute:assert-6 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>document</var>'s <a href=#showing-hint-popover-list id=the-popover-attribute:showing-hint-popover-list-4>showing hint popover list</a> does
       not contain <var>element</var>.<li><p>Set <var>element</var>'s <a href=#opened-in-popover-mode id=the-popover-attribute:opened-in-popover-mode-2>opened in popover mode</a> to "<code>hint</code>".</ol>
     <li id=canceling-popovers>
      <p>Set <var>element</var>'s <a href=#popover-close-watcher id=the-popover-attribute:popover-close-watcher>popover close watcher</a> to the result of <a href=interaction.html#establish-a-close-watcher id=the-popover-attribute:establish-a-close-watcher>establishing a close watcher</a> given
      <var>element</var>'s <a id=the-popover-attribute:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global object</a>, with:</p>

      <ul><li><p><i id=the-popover-attribute:create-close-watcher-cancelaction><a href=interaction.html#create-close-watcher-cancelaction>cancelAction</a></i> being to return
       true.<li><p><i id=the-popover-attribute:create-close-watcher-closeaction><a href=interaction.html#create-close-watcher-closeaction>closeAction</a></i> being to <a href=#hide-popover-algorithm id=the-popover-attribute:hide-popover-algorithm-2>hide a popover</a> given <var>element</var>, true, true,
       false, and null.<li><p><i id=the-popover-attribute:create-close-watcher-getenabledstate><a href=interaction.html#create-close-watcher-getenabledstate>getEnabledState</a></i> being to return
       true.</ul>
     </ol>
   <li><p>Set <var>element</var>'s <a id=the-popover-attribute:previously-focused-element href=interactive-elements.html#previously-focused-element>previously focused element</a> to null.<li><p>Let <var>originallyFocusedElement</var> be <var>document</var>'s <a id=the-popover-attribute:focused-area-of-the-document href=interaction.html#focused-area-of-the-document>focused area of the
   document</a>'s <a id=the-popover-attribute:dom-anchor href=interaction.html#dom-anchor>DOM anchor</a>.<li><p><a id=the-popover-attribute:add-an-element-to-the-top-layer href=https://drafts.csswg.org/css-position-4/#add-an-element-to-the-top-layer data-x-internal=add-an-element-to-the-top-layer>Add an element to the top layer</a> given <var>element</var>.<li><p>Set <var>element</var>'s <a href=#popover-visibility-state id=the-popover-attribute:popover-visibility-state-2>popover visibility state</a> to <a href=#popover-showing-state id=the-popover-attribute:popover-showing-state-2>showing</a>.<li><p>Set <var>element</var>'s <a href=#popover-trigger id=the-popover-attribute:popover-trigger-2>popover trigger</a> to <var>source</var>.<li><p>Set <var>element</var>'s <a id=the-popover-attribute:implicit-anchor-element href=https://drafts.csswg.org/css-anchor-position/#implicit-anchor-element data-x-internal=implicit-anchor-element>implicit anchor element</a> to
   <var>source</var>.<li><p>Run the <a href=#popover-focusing-steps id=the-popover-attribute:popover-focusing-steps>popover focusing steps</a> given <var>element</var>.<li><p>If <var>shouldRestoreFocus</var> is true and <var>element</var>'s <code id=the-popover-attribute:attr-popover-13><a href=#attr-popover>popover</a></code> attribute is not in the <a href=#attr-popover-none-state id=the-popover-attribute:attr-popover-none-state>No Popover</a> state, then set <var>element</var>'s
   <a id=the-popover-attribute:previously-focused-element-2 href=interactive-elements.html#previously-focused-element>previously focused element</a> to <var>originallyFocusedElement</var>.<li><p><a href=#queue-a-popover-toggle-event-task id=the-popover-attribute:queue-a-popover-toggle-event-task>Queue a popover toggle event task</a> given <var>element</var>, "<code>closed</code>", "<code>open</code>", and <var>source</var>.<li><p>Run <var>cleanupShowingFlag</var>.</ol>

  <p>To <dfn id=queue-a-popover-toggle-event-task>queue a popover toggle event task</dfn> given an element <var>element</var>, a string
  <var>oldState</var>, a string <var>newState</var>, and an <code id=the-popover-attribute:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> or null
  <var>source</var>:

  <ol><li>
    <p>If <var>element</var>'s <a href=#popover-toggle-task-tracker id=the-popover-attribute:popover-toggle-task-tracker>popover toggle task tracker</a> is not null, then:</p>

    <ol><li><p>Set <var>oldState</var> to <var>element</var>'s <a href=#popover-toggle-task-tracker id=the-popover-attribute:popover-toggle-task-tracker-2>popover toggle task
     tracker</a>'s <a href=interaction.html#toggle-task-old-state id=the-popover-attribute:toggle-task-old-state>old state</a>.<li><p>Remove <var>element</var>'s <a href=#popover-toggle-task-tracker id=the-popover-attribute:popover-toggle-task-tracker-3>popover toggle task tracker</a>'s <a href=interaction.html#toggle-task-task id=the-popover-attribute:toggle-task-task>task</a> from its <a id=the-popover-attribute:task-queue href=webappapis.html#task-queue>task queue</a>.<li><p>Set <var>element</var>'s <a href=#popover-toggle-task-tracker id=the-popover-attribute:popover-toggle-task-tracker-4>popover toggle task tracker</a> to null.</ol>
   <li>
    <p><a id=the-popover-attribute:queue-an-element-task href=webappapis.html#queue-an-element-task>Queue an element task</a> given the <a id=the-popover-attribute:dom-manipulation-task-source href=webappapis.html#dom-manipulation-task-source>DOM manipulation task source</a> and
    <var>element</var> to run the following steps:</p>

    <ol><li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-popover-attribute:concept-event-fire-2 data-x-internal=concept-event-fire>Fire an event</a> named <code id=the-popover-attribute:event-toggle><a href=indices.html#event-toggle>toggle</a></code> at <var>element</var>, using <code id=the-popover-attribute:toggleevent-2><a href=interaction.html#toggleevent>ToggleEvent</a></code>, with
     the <code id=the-popover-attribute:dom-toggleevent-oldstate-2><a href=interaction.html#dom-toggleevent-oldstate>oldState</a></code> attribute initialized to
     <var>oldState</var>, the <code id=the-popover-attribute:dom-toggleevent-newstate-2><a href=interaction.html#dom-toggleevent-newstate>newState</a></code> attribute
     initialized to <var>newState</var>, and the <code id=the-popover-attribute:dom-toggleevent-source-2><a href=interaction.html#dom-toggleevent-source>source</a></code> attribute initialized to
     <var>source</var>.<li><p>Set <var>element</var>'s <a href=#popover-toggle-task-tracker id=the-popover-attribute:popover-toggle-task-tracker-5>popover toggle task tracker</a> to null.</ol>
   <li><p>Set <var>element</var>'s <a href=#popover-toggle-task-tracker id=the-popover-attribute:popover-toggle-task-tracker-6>popover toggle task tracker</a> to a struct with <a href=interaction.html#toggle-task-task id=the-popover-attribute:toggle-task-task-2>task</a> set to the just-queued <a href=webappapis.html#concept-task id=the-popover-attribute:concept-task>task</a> and <a href=interaction.html#toggle-task-old-state id=the-popover-attribute:toggle-task-old-state-2>old state</a> set
   to <var>oldState</var>.</ol>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidePopover title="The hidePopover() method of the HTMLElement interface hides a popover element (i.e. one that has a valid popover attribute) by removing it from the top layer and styling it with display: none.">HTMLElement/hidePopover</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 114+</span></span><span class="safari yes"><span>Safari</span><span>17+</span></span><span class="chrome yes"><span>Chrome</span><span>114+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>114+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLElement id=dom-hidepopover data-dfn-type=method><code>hidePopover()</code></dfn>
  method steps are:</p>

  <ol><li><p>Run the <a href=#hide-popover-algorithm id=the-popover-attribute:hide-popover-algorithm-3>hide popover algorithm</a> given <a id=the-popover-attribute:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, true, true, true, and
   null.</ol>

  <p>To <dfn id=hide-popover-algorithm>hide a popover</dfn> given an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-13>HTML element</a> <var>element</var>, a boolean <var>focusPreviousElement</var>, a
  boolean <var>fireEvents</var>, a boolean <var>throwExceptions</var>, and an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-14>HTML element</a> or null <var>source</var>:</p>

  <ol><li><p>If the result of running <a href=#check-popover-validity id=the-popover-attribute:check-popover-validity-6>check popover validity</a> given <var>element</var>,
   true, <var>throwExceptions</var>, and null is false, then return.<li><p>Let <var>document</var> be <var>element</var>'s <a id=the-popover-attribute:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>Let <var>nestedHide</var> be <var>element</var>'s <a href=#popover-showing-or-hiding id=the-popover-attribute:popover-showing-or-hiding-4>popover showing or
   hiding</a>.<li><p>Set <var>element</var>'s <a href=#popover-showing-or-hiding id=the-popover-attribute:popover-showing-or-hiding-5>popover showing or hiding</a> to true.<li><p>If <var>nestedHide</var> is true, then set <var>fireEvents</var> to false.<li>
    <p>Let <var>cleanupSteps</var> be the following steps:</p>

    <ol><li><p>If <var>nestedHide</var> is false, then set <var>element</var>'s <a href=#popover-showing-or-hiding id=the-popover-attribute:popover-showing-or-hiding-6>popover showing
     or hiding</a> to false.<li>
      <p>If <var>element</var>'s <a href=#popover-close-watcher id=the-popover-attribute:popover-close-watcher-2>popover close watcher</a> is not null, then:</p>

      <ol><li><p><a href=interaction.html#close-watcher-destroy id=the-popover-attribute:close-watcher-destroy>Destroy</a> <var>element</var>'s <a href=#popover-close-watcher id=the-popover-attribute:popover-close-watcher-3>popover
       close watcher</a>.<li><p>Set <var>element</var>'s <a href=#popover-close-watcher id=the-popover-attribute:popover-close-watcher-4>popover close watcher</a> to null.</ol>
     </ol>
   <li>
    <p>If <var>element</var>'s <a href=#opened-in-popover-mode id=the-popover-attribute:opened-in-popover-mode-3>opened in popover mode</a> is "<code>auto</code>"
    or "<code>hint</code>", then:</p>

    <ol><li><p>Run <a href=#hide-all-popovers-until id=the-popover-attribute:hide-all-popovers-until-5>hide all popovers until</a> given
     <var>element</var>, <var>focusPreviousElement</var>, and <var>fireEvents</var>.<li>
      <p>If the result of running <a href=#check-popover-validity id=the-popover-attribute:check-popover-validity-7>check popover validity</a> given <var>element</var>,
      true, and <var>throwExceptions</var> is false, then run <var>cleanupSteps</var> and
      return.</p>

      <p class=note><a href=#check-popover-validity id=the-popover-attribute:check-popover-validity-8>Check popover validity</a> is called again because running <a href=#hide-all-popovers-until id=the-popover-attribute:hide-all-popovers-until-6>hide all popovers until</a> could have disconnected
      <var>element</var> or changed its <code id=the-popover-attribute:attr-popover-14><a href=#attr-popover>popover</a></code> attribute.</p>
     </ol>
   <li><p>Let <var>autoPopoverListContainsElement</var> be true if <var>document</var>'s
   <a href=#auto-popover-list id=the-popover-attribute:auto-popover-list-4>showing auto popover list</a>'s last item is <var>element</var>, otherwise
   false.<li>
    <p>If <var>fireEvents</var> is true:</p>

    <ol><li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-popover-attribute:concept-event-fire-3 data-x-internal=concept-event-fire>Fire an event</a> named <code id=the-popover-attribute:event-beforetoggle-4><a href=indices.html#event-beforetoggle>beforetoggle</a></code>, using <code id=the-popover-attribute:toggleevent-3><a href=interaction.html#toggleevent>ToggleEvent</a></code>, with the <code id=the-popover-attribute:dom-toggleevent-oldstate-3><a href=interaction.html#dom-toggleevent-oldstate>oldState</a></code> attribute initialized to "<code>open</code>", the <code id=the-popover-attribute:dom-toggleevent-newstate-3><a href=interaction.html#dom-toggleevent-newstate>newState</a></code>
     attribute initialized to "<code>closed</code>", and the <code id=the-popover-attribute:dom-toggleevent-source-3><a href=interaction.html#dom-toggleevent-source>source</a></code> attribute set to <var>source</var> at
     <var>element</var>.<li><p>If <var>autoPopoverListContainsElement</var> is true and <var>document</var>'s
     <a href=#auto-popover-list id=the-popover-attribute:auto-popover-list-5>showing auto popover list</a>'s last item is not <var>element</var>, then run <a href=#hide-all-popovers-until id=the-popover-attribute:hide-all-popovers-until-7>hide all popovers until</a> given <var>element</var>,
     <var>focusPreviousElement</var>, and false.<li>
      <p>If the result of running <a href=#check-popover-validity id=the-popover-attribute:check-popover-validity-9>check popover validity</a> given <var>element</var>,
      true, <var>throwExceptions</var>, and null is false, then run <var>cleanupSteps</var> and
      return.</p>

      <p class=note><a href=#check-popover-validity id=the-popover-attribute:check-popover-validity-10>Check popover validity</a> is called again because firing the <code id=the-popover-attribute:event-beforetoggle-5><a href=indices.html#event-beforetoggle>beforetoggle</a></code> event could have disconnected
      <var>element</var> or changed its <code id=the-popover-attribute:attr-popover-15><a href=#attr-popover>popover</a></code> attribute.</p>
     <li><p><a id=the-popover-attribute:request-an-element-to-be-removed-from-the-top-layer href=https://drafts.csswg.org/css-position-4/#request-an-element-to-be-removed-from-the-top-layer data-x-internal=request-an-element-to-be-removed-from-the-top-layer>Request an element to be removed from the top layer</a> given
     <var>element</var>.<li><p>Set <var>element</var>'s <a id=the-popover-attribute:implicit-anchor-element-2 href=https://drafts.csswg.org/css-anchor-position/#implicit-anchor-element data-x-internal=implicit-anchor-element>implicit anchor element</a> to null.</ol>
   <li><p>Otherwise, <a id=the-popover-attribute:remove-an-element-from-the-top-layer-immediately href=https://drafts.csswg.org/css-position-4/#remove-an-element-from-the-top-layer-immediately data-x-internal=remove-an-element-from-the-top-layer-immediately>remove an element from the top layer immediately</a> given
   <var>element</var>.<li><p>Set <var>element</var>'s <a href=#popover-trigger id=the-popover-attribute:popover-trigger-3>popover trigger</a> to null.<li><p>Set <var>element</var>'s <a href=#opened-in-popover-mode id=the-popover-attribute:opened-in-popover-mode-4>opened in popover mode</a> to null.<li><p>Set <var>element</var>'s <a href=#popover-visibility-state id=the-popover-attribute:popover-visibility-state-3>popover visibility state</a> to <a href=#popover-hidden-state id=the-popover-attribute:popover-hidden-state-2>hidden</a>.<li><p>If <var>fireEvents</var> is true, then <a href=#queue-a-popover-toggle-event-task id=the-popover-attribute:queue-a-popover-toggle-event-task-2>queue a popover toggle event task</a>
   given <var>element</var>, "<code>open</code>", "<code>closed</code>", and
   <var>source</var>.<li><p>Let <var>previouslyFocusedElement</var> be <var>element</var>'s <a id=the-popover-attribute:previously-focused-element-3 href=interactive-elements.html#previously-focused-element>previously focused
   element</a>.<li>
    <p>If <var>previouslyFocusedElement</var> is not null, then:</p>

    <ol><li><p>Set <var>element</var>'s <a id=the-popover-attribute:previously-focused-element-4 href=interactive-elements.html#previously-focused-element>previously focused element</a> to null.<li><p>If <var>focusPreviousElement</var> is true and <var>document</var>'s <a id=the-popover-attribute:focused-area-of-the-document-2 href=interaction.html#focused-area-of-the-document>focused area
     of the document</a>'s <a id=the-popover-attribute:dom-anchor-2 href=interaction.html#dom-anchor>DOM anchor</a> is a <a id=the-popover-attribute:shadow-including-inclusive-descendant href=https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-descendant data-x-internal=shadow-including-inclusive-descendant>shadow-including inclusive
     descendant</a> of <var>element</var>, then run the <a id=the-popover-attribute:focusing-steps href=interaction.html#focusing-steps>focusing steps</a> for
     <var>previouslyFocusedElement</var>; the viewport should not be scrolled by doing this
     step.</ol>
   <li><p>Run <var>cleanupSteps</var>.</ol>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/togglePopover title="The togglePopover() method of the HTMLElement interface toggles a popover element (i.e. one that has a valid popover attribute) between the hidden and showing states.">HTMLElement/togglePopover</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 114+</span></span><span class="safari yes"><span>Safari</span><span>17+</span></span><span class="chrome yes"><span>Chrome</span><span>114+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>114+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLElement id=dom-togglepopover data-dfn-type=method><code>togglePopover(<var>options</var>)</code></dfn> method steps are:</p>

  <ol><li><p>Let <var>force</var> be null.<li><p>If <var>options</var> is a boolean, set <var>force</var> to <var>options</var>.<li><p>Otherwise, if <var>options</var>["<code id=the-popover-attribute:dom-togglepopoveroptions-force><a href=dom.html#dom-togglepopoveroptions-force>force</a></code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=the-popover-attribute:map-exists-2 data-x-internal=map-exists>exists</a>,
   set <var>force</var> to <var>options</var>["<code id=the-popover-attribute:dom-togglepopoveroptions-force-2><a href=dom.html#dom-togglepopoveroptions-force>force</a></code>"].<li><p>Let <var>source</var> be <var>options</var>["<code id=the-popover-attribute:dom-showpopoveroptions-source-2><a href=dom.html#dom-showpopoveroptions-source>source</a></code>"] if it <a href=https://infra.spec.whatwg.org/#map-exists id=the-popover-attribute:map-exists-3 data-x-internal=map-exists>exists</a>; otherwise, null.<li><p>If <a id=the-popover-attribute:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#popover-visibility-state id=the-popover-attribute:popover-visibility-state-4>popover visibility state</a> is <a href=#popover-showing-state id=the-popover-attribute:popover-showing-state-3>showing</a>, and <var>force</var> is null or false, then run
   the <a href=#hide-popover-algorithm id=the-popover-attribute:hide-popover-algorithm-4>hide popover algorithm</a> given <a id=the-popover-attribute:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, true, true, true, and
   null.<li><p>Otherwise, if <var>force</var> is null or true, then run <a href=#show-popover id=the-popover-attribute:show-popover-2>show popover</a> given
   <a id=the-popover-attribute:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, true, and <var>source</var>.<li>
    <p>Otherwise:</p>

    <ol><li><p>Let <var>expectedToBeShowing</var> be true if <a id=the-popover-attribute:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#popover-visibility-state id=the-popover-attribute:popover-visibility-state-5>popover
     visibility state</a> is <a href=#popover-showing-state id=the-popover-attribute:popover-showing-state-4>showing</a>; otherwise
     false.<li><p>Run <a href=#check-popover-validity id=the-popover-attribute:check-popover-validity-11>check popover validity</a> given <var>expectedToBeShowing</var>, true, and
     null.</ol>
   <li><p>Return true if <a id=the-popover-attribute:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#popover-visibility-state id=the-popover-attribute:popover-visibility-state-6>popover visibility state</a> is <a href=#popover-showing-state id=the-popover-attribute:popover-showing-state-5>showing</a>; otherwise false.</ol>

  <p>To <dfn id=hide-all-popovers-until data-export="">hide all popovers until</dfn>, given an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-15>HTML element</a> or <code id=the-popover-attribute:document-2><a href=dom.html#document>Document</a></code> <var>endpoint</var>, a boolean
  <var>focusPreviousElement</var>, and a boolean <var>fireEvents</var>:</p>

  <ol><li><p>If <var>endpoint</var> is an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-16>HTML element</a> and
   <var>endpoint</var> is not in the <a href=#popover-showing-state id=the-popover-attribute:popover-showing-state-6>popover showing
   state</a>, then return.<li><p>Let <var>document</var> be <var>endpoint</var>'s <a id=the-popover-attribute:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p><a id=the-popover-attribute:assert-7 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>endpoint</var> is a <code id=the-popover-attribute:document-3><a href=dom.html#document>Document</a></code> or
   <var>endpoint</var>'s <a href=#popover-visibility-state id=the-popover-attribute:popover-visibility-state-7>popover visibility state</a> is <a href=#popover-showing-state id=the-popover-attribute:popover-showing-state-7>showing</a>.<li><p><a id=the-popover-attribute:assert-8 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>endpoint</var> is a <code id=the-popover-attribute:document-4><a href=dom.html#document>Document</a></code> or
   <var>endpoint</var>'s <code id=the-popover-attribute:attr-popover-16><a href=#attr-popover>popover</a></code> attribute is in the <a href=#attr-popover-auto-state id=the-popover-attribute:attr-popover-auto-state-5>Auto</a> state or <var>endpoint</var>'s <code id=the-popover-attribute:attr-popover-17><a href=#attr-popover>popover</a></code> attribute is in the <a href=#attr-popover-hint-state id=the-popover-attribute:attr-popover-hint-state-3>Hint</a> state.<li>
    <p>If <var>endpoint</var> is a <code id=the-popover-attribute:document-5><a href=dom.html#document>Document</a></code>:</p>

    <ol><li><p>Run <a href=#close-entire-popover-list id=the-popover-attribute:close-entire-popover-list-3>close entire popover list</a> given <var>document</var>'s <a href=#showing-hint-popover-list id=the-popover-attribute:showing-hint-popover-list-5>showing
     hint popover list</a>, <var>focusPreviousElement</var>, and <var>fireEvents</var>.<li><p>Run <a href=#close-entire-popover-list id=the-popover-attribute:close-entire-popover-list-4>close entire popover list</a> given <var>document</var>'s <a href=#auto-popover-list id=the-popover-attribute:auto-popover-list-6>showing
     auto popover list</a>, <var>focusPreviousElement</var>, and <var>fireEvents</var>.<li><p>Return.</ol>
   <li>
    <p>If <var>document</var>'s <a href=#showing-hint-popover-list id=the-popover-attribute:showing-hint-popover-list-6>showing hint popover list</a> contains
    <var>endpoint</var>:</p>

    <ol><li><p><a id=the-popover-attribute:assert-9 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>endpoint</var>'s <code id=the-popover-attribute:attr-popover-18><a href=#attr-popover>popover</a></code>
     attribute is in the <a href=#attr-popover-hint-state id=the-popover-attribute:attr-popover-hint-state-4>Hint</a> state.<li><p>Run <a href=#hide-popover-stack-until id=the-popover-attribute:hide-popover-stack-until>hide popover stack until</a> given <var>endpoint</var>,
     <var>document</var>'s <a href=#showing-hint-popover-list id=the-popover-attribute:showing-hint-popover-list-7>showing hint popover list</a>, <var>focusPreviousElement</var>,
     and <var>fireEvents</var>.<li><p>Return.</ol>
   <li><p>Run <a href=#close-entire-popover-list id=the-popover-attribute:close-entire-popover-list-5>close entire popover list</a> given <var>document</var>'s <a href=#showing-hint-popover-list id=the-popover-attribute:showing-hint-popover-list-8>showing hint
   popover list</a>, <var>focusPreviousElement</var>, and <var>fireEvents</var>.<li><p>If <var>document</var>'s <a href=#auto-popover-list id=the-popover-attribute:auto-popover-list-7>showing auto popover list</a> does not contain
   <var>endpoint</var>, then return.<li><p>Run <a href=#hide-popover-stack-until id=the-popover-attribute:hide-popover-stack-until-2>hide popover stack until</a> given <var>endpoint</var>, <var>document</var>'s
   <a href=#auto-popover-list id=the-popover-attribute:auto-popover-list-8>showing auto popover list</a>, <var>focusPreviousElement</var>, and
   <var>fireEvents</var>.</ol>

  <p>To <dfn id=hide-popover-stack-until>hide popover stack until</dfn>, given an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-17>HTML
  element</a> <var>endpoint</var>, a <a id=the-popover-attribute:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> <var>popoverList</var>, a boolean
  <var>focusPreviousElement</var>, and a boolean <var>fireEvents</var>:</p>

  <ol><li><p>Let <var>repeatingHide</var> be false.<li>
    <p>Perform the following steps at least once:</p>

    <ol><li><p>Let <var>lastToHide</var> be null.<li>
      <p>For each <var>popover</var> in <var>popoverList</var>:</p>

      <ol><li><p>If <var>popover</var> is <var>endpoint</var>, then <a id=the-popover-attribute:break href=https://infra.spec.whatwg.org/#iteration-break data-x-internal=break>break</a>.<li><p>Set <var>lastToHide</var> to <var>popover</var>.</ol>
     <li><p>If <var>lastToHide</var> is null, then return.<li>
      <p><a id=the-popover-attribute:while href=https://infra.spec.whatwg.org/#iteration-while data-x-internal=while>While</a> <var>lastToHide</var>'s <a href=#popover-visibility-state id=the-popover-attribute:popover-visibility-state-8>popover visibility state</a> is <a href=#popover-showing-state id=the-popover-attribute:popover-showing-state-8>showing</a>:</p>

      <ol><li><p><a id=the-popover-attribute:assert-10 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>popoverList</var> is not empty.<li><p>Run the <a href=#hide-popover-algorithm id=the-popover-attribute:hide-popover-algorithm-5>hide popover algorithm</a> given the last item in
       <var>popoverList</var>, <var>focusPreviousElement</var>, <var>fireEvents</var>, false, and
       null.</ol>
     <li><p><a id=the-popover-attribute:assert-11 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>repeatingHide</var> is false or <var>popoverList</var>'s last
     item is <var>endpoint</var>.<li><p>Set <var>repeatingHide</var> to true if <var>popoverList</var> contains
     <var>endpoint</var> and <var>popoverList</var>'s last item is not <var>endpoint</var>,
     otherwise false.<li><p>If <var>repeatingHide</var> is true, then set <var>fireEvents</var> to false.</ol>

    <p>and keep performing them <a id=the-popover-attribute:while-2 href=https://infra.spec.whatwg.org/#iteration-while data-x-internal=while>while</a> <var>repeatingHide</var> is true.</p>
   </ol>

  <p class=note>The <a href=#hide-all-popovers-until id=the-popover-attribute:hide-all-popovers-until-8>hide all popovers until
  algorithm</a> is used in several cases to hide all popovers that don't stay open when something
  happens. For example, during light-dismiss of a popover, this algorithm ensures that we close only
  the popovers that aren't related to the node clicked by the user.</p>

  <p>To find the <dfn id=topmost-popover-ancestor data-export="">topmost popover ancestor</dfn>, given a <code id=the-popover-attribute:node><a data-x-internal=node href=https://dom.spec.whatwg.org/#interface-node>Node</a></code>
  <var>newPopoverOrTopLayerElement</var>, a <a id=the-popover-attribute:list-2 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> <var>popoverList</var>, an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-18>HTML element</a> or null <var>source</var>, and a boolean
  <var>isPopover</var>, perform the following steps. They return an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-19>HTML element</a> or null.</p>

  <div class=note>
   <p>The <a href=#topmost-popover-ancestor id=the-popover-attribute:topmost-popover-ancestor-5>topmost popover ancestor</a> algorithm will return the topmost (latest in the
   <a href=#auto-popover-list id=the-popover-attribute:auto-popover-list-9>showing auto popover list</a>) ancestor popover for the provided popover or top layer
   element. Popovers can be related to each other in several ways, creating a tree of popovers.
   There are two paths through which one popover (call it the "child" popover) can have a topmost
   ancestor popover (call it the "parent" popover):</p>

   <ol><li><p>The popovers are nested within each other in the node tree. In this case, the descendant
    popover is the "child" and its topmost ancestor popover is the "parent".<li><p>A popover trigger element (e.g., a <code id=the-popover-attribute:the-button-element><a href=form-elements.html#the-button-element>button</a></code>) has a <code id=the-popover-attribute:attr-popovertarget><a href=#attr-popovertarget>popovertarget</a></code> attribute pointing to a popover. In this case,
    the popover is the "child", and the popover subtree the trigger element is in is the
    "parent". The trigger element has to be in a popover and reference an open popover.</ol>

   <p>In each of the relationships formed above, the parent popover has to be strictly earlier in
   the <a href=#auto-popover-list id=the-popover-attribute:auto-popover-list-10>showing auto popover list</a> than the child popover, or it does not form a valid
   ancestral relationship. This eliminates non-showing popovers and self-pointers (e.g., a popover
   containing an invoking element that points back to the containing popover), and it allows for the
   construction of a well-formed tree from the (possibly cyclic) graph of connections. Only <a href=#attr-popover-auto-state id=the-popover-attribute:attr-popover-auto-state-6>Auto</a> popovers are considered.</p>

   <p>If the provided element is a top layer element such as a <code id=the-popover-attribute:the-dialog-element><a href=interactive-elements.html#the-dialog-element>dialog</a></code> which is not
   showing as a popover, then <a href=#topmost-popover-ancestor id=the-popover-attribute:topmost-popover-ancestor-6>topmost popover ancestor</a> will only look in the node tree
   to find the first popover.</p>
  </div>

  <ol><li>
    <p>If <var>isPopover</var> is true:</p>

    <ol><li><p><a id=the-popover-attribute:assert-12 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>newPopoverOrTopLayerElement</var> is an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-20>HTML element</a>.<li><p><a id=the-popover-attribute:assert-13 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>newPopoverOrTopLayerElement</var>'s <code id=the-popover-attribute:attr-popover-19><a href=#attr-popover>popover</a></code> attribute is not in the <a href=#attr-popover-none-state id=the-popover-attribute:attr-popover-none-state-2>No Popover State</a> or the <a href=#attr-popover-manual-state id=the-popover-attribute:attr-popover-manual-state-2>Manual</a> state.<li><p><a id=the-popover-attribute:assert-14 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>newPopoverOrTopLayerElement</var>'s <a href=#popover-visibility-state id=the-popover-attribute:popover-visibility-state-9>popover visibility
     state</a> is not in the <a href=#popover-showing-state id=the-popover-attribute:popover-showing-state-9>popover showing
     state</a>.</ol>
   <li>
    <p>Otherwise:</p>

    <ol><li><p><a id=the-popover-attribute:assert-15 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>source</var> is null.</ol>
   <li><p>Let <var>popoverPositions</var> be an empty <a id=the-popover-attribute:ordered-map href=https://infra.spec.whatwg.org/#ordered-map data-x-internal=ordered-map>ordered map</a>.<li><p>Let <var>index</var> be 0.<li>
    <p>For each <var>popover</var> of <var>popoverList</var>:</p>

    <ol><li><p><a href=https://infra.spec.whatwg.org/#map-set id=the-popover-attribute:map-set data-x-internal=map-set>Set</a> <var>popoverPositions</var>[<var>popover</var>] to
     <var>index</var>.<li><p>Increment <var>index</var> by 1.</ol>
   <li><p>If <var>isPopover</var> is true, then <a href=https://infra.spec.whatwg.org/#map-set id=the-popover-attribute:map-set-2 data-x-internal=map-set>set</a>
   <var>popoverPositions</var>[<var>newPopoverOrTopLayerElement</var>] to <var>index</var>.<li><p>Increment <var>index</var> by 1.<li><p>Let <var>topmostPopoverAncestor</var> be null.<li>
    <p>Let <var>checkAncestor</var> be an algorithm which performs the following steps given
    <var>candidate</var>:</p>

    <ol><li><p>If <var>candidate</var> is null, then return.<li><p>Let <var>okNesting</var> be false.<li><p>Let <var>candidateAncestor</var> be null.<li>
      <p><a id=the-popover-attribute:while-3 href=https://infra.spec.whatwg.org/#iteration-while data-x-internal=while>While</a> <var>okNesting</var> is false:</p>

      <ol><li><p>Set <var>candidateAncestor</var> to the result of running <a href=#nearest-inclusive-open-popover id=the-popover-attribute:nearest-inclusive-open-popover>nearest inclusive open
       popover</a> given <var>candidate</var>.<li><p>If <var>candidateAncestor</var> is null or <var>popoverPositions</var> does not
       contain <var>candidateAncestor</var>, then return.<li><p><a id=the-popover-attribute:assert-16 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>candidateAncestor</var>'s <code id=the-popover-attribute:attr-popover-20><a href=#attr-popover>popover</a></code> attribute is not in the <a href=#attr-popover-manual-state id=the-popover-attribute:attr-popover-manual-state-3>Manual</a> or <a href=#attr-popover-none-state id=the-popover-attribute:attr-popover-none-state-3>None</a> state.<li><p>Set <var>okNesting</var> to true if <var>isPopover</var> is false,
       <var>newPopoverOrTopLayerElement</var>'s <code id=the-popover-attribute:attr-popover-21><a href=#attr-popover>popover</a></code> attribute
       is in the <a href=#attr-popover-hint-state id=the-popover-attribute:attr-popover-hint-state-5>Hint</a> state, or
       <var>candidateAncestor</var>'s <code id=the-popover-attribute:attr-popover-22><a href=#attr-popover>popover</a></code> attribute is in the
       <a href=#attr-popover-auto-state id=the-popover-attribute:attr-popover-auto-state-7>Auto</a> state.<li><p>If <var>okNesting</var> is false, then set <var>candidate</var> to
       <var>candidateAncestor</var>'s parent in the <a id=the-popover-attribute:flat-tree href=https://drafts.csswg.org/css-scoping/#flat-tree data-x-internal=flat-tree>flat tree</a>.</ol>
     <li><p>Let <var>candidatePosition</var> be
     <var>popoverPositions</var>[<var>candidateAncestor</var>].<li><p>If <var>topmostPopoverAncestor</var> is null or
     <var>popoverPositions</var>[<var>topmostPopoverAncestor</var>] is less than
     <var>candidatePosition</var>, then set <var>topmostPopoverAncestor</var> to
     <var>candidateAncestor</var>.</ol>
   <li><p>Run <var>checkAncestor</var> given <var>newPopoverOrTopLayerElement</var>'s parent node
   within the <a id=the-popover-attribute:flat-tree-2 href=https://drafts.csswg.org/css-scoping/#flat-tree data-x-internal=flat-tree>flat tree</a>.<li><p>Run <var>checkAncestor</var> given <var>source</var>.<li><p>Return <var>topmostPopoverAncestor</var>.</ol>

  <p>To find the <dfn id=nearest-inclusive-open-popover>nearest inclusive open popover</dfn> given a <code id=the-popover-attribute:node-2><a data-x-internal=node href=https://dom.spec.whatwg.org/#interface-node>Node</a></code>
  <var>node</var>, perform the following steps. They return an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-21>HTML
  element</a> or null.</p>

  <ol><li><p>Let <var>currentNode</var> be <var>node</var>.<li>
    <p>While <var>currentNode</var> is not null:</p>

    <ol><li><p>If <var>currentNode</var>'s <code id=the-popover-attribute:attr-popover-23><a href=#attr-popover>popover</a></code> attribute is in
     the <a href=#attr-popover-auto-state id=the-popover-attribute:attr-popover-auto-state-8>Auto</a> state or the <a href=#attr-popover-hint-state id=the-popover-attribute:attr-popover-hint-state-6>Hint</a> state, and <var>currentNode</var>'s
     <a href=#popover-visibility-state id=the-popover-attribute:popover-visibility-state-10>popover visibility state</a> is <a href=#popover-showing-state id=the-popover-attribute:popover-showing-state-10>showing</a>,
     then return <var>currentNode</var>.<li><p>Set <var>currentNode</var> to <var>currentNode</var>'s parent in the <a id=the-popover-attribute:flat-tree-3 href=https://drafts.csswg.org/css-scoping/#flat-tree data-x-internal=flat-tree>flat
     tree</a>.</ol>
   <li><p>Return null.</ol>

  <p>To <dfn id=topmost-auto-popover>find the topmost auto or hint popover</dfn> given a
  <code id=the-popover-attribute:document-6><a href=dom.html#document>Document</a></code> <var>document</var>, perform the following steps. They return an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-22>HTML element</a> or null.</p>

  <ol><li><p>If <var>document</var>'s <a href=#showing-hint-popover-list id=the-popover-attribute:showing-hint-popover-list-9>showing hint popover list</a> is not empty, then return
   <var>document</var>'s <a href=#showing-hint-popover-list id=the-popover-attribute:showing-hint-popover-list-10>showing hint popover list</a>'s last element.<li><p>If <var>document</var>'s <a href=#auto-popover-list id=the-popover-attribute:auto-popover-list-11>showing auto popover list</a> is not empty, then return
   <var>document</var>'s <a href=#auto-popover-list id=the-popover-attribute:auto-popover-list-12>showing auto popover list</a>'s last element.<li><p>Return null.</ol>

  <p>To perform the <dfn id=popover-focusing-steps>popover focusing steps</dfn> for an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-23>HTML
  element</a> <var>subject</var>:</p>

  <ol><li><p>If the <a id=the-popover-attribute:allow-focus-steps href=interaction.html#allow-focus-steps>allow focus steps</a> given <var>subject</var>'s <a id=the-popover-attribute:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
   document</a> return false, then return.<li><p>If <var>subject</var> is a <code id=the-popover-attribute:the-dialog-element-2><a href=interactive-elements.html#the-dialog-element>dialog</a></code> element, then run the <a id=the-popover-attribute:dialog-focusing-steps href=interactive-elements.html#dialog-focusing-steps>dialog focusing
   steps</a> given <var>subject</var> and return.<li><p>If <var>subject</var> has the <code id=the-popover-attribute:attr-fe-autofocus><a href=interaction.html#attr-fe-autofocus>autofocus</a></code>
   attribute, then let <var>control</var> be <var>subject</var>.

   <li><p>Otherwise, let <var>control</var> be the <a id=the-popover-attribute:autofocus-delegate href=interaction.html#autofocus-delegate>autofocus delegate</a> for
   <var>subject</var> given "<code>other</code>".<li><p>If <var>control</var> is null, then return.<li><p>Run the <a id=the-popover-attribute:focusing-steps-2 href=interaction.html#focusing-steps>focusing steps</a> given <var>control</var>.<li><p>Let <var>topDocument</var> be <var>control</var>'s <a id=the-popover-attribute:node-navigable href=document-sequences.html#node-navigable>node navigable</a>'s <a href=document-sequences.html#nav-top id=the-popover-attribute:nav-top>top-level traversable</a>'s <a href=document-sequences.html#nav-document id=the-popover-attribute:nav-document>active
   document</a>.<li><p>If <var>control</var>'s <a id=the-popover-attribute:node-document-5 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=the-popover-attribute:concept-document-origin data-x-internal=concept-document-origin>origin</a> is not the <a href=browsers.html#same-origin id=the-popover-attribute:same-origin>same</a>
   as the <a href=https://dom.spec.whatwg.org/#concept-document-origin id=the-popover-attribute:concept-document-origin-2 data-x-internal=concept-document-origin>origin</a> of <var>topDocument</var>, then
   return.<li><p><a href=https://infra.spec.whatwg.org/#list-empty id=the-popover-attribute:list-empty data-x-internal=list-empty>Empty</a> <var>topDocument</var>'s
   <a id=the-popover-attribute:autofocus-candidates href=interaction.html#autofocus-candidates>autofocus candidates</a>.<li><p>Set <var>topDocument</var>'s <a id=the-popover-attribute:autofocus-processed-flag href=interaction.html#autofocus-processed-flag>autofocus processed flag</a> to true.</ol>

  <p>To <dfn id=check-popover-validity>check popover validity</dfn> for an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-24>HTML element</a>
  <var>element</var> given a boolean <var>expectedToBeShowing</var>, a boolean
  <var>throwExceptions</var>, and a <code id=the-popover-attribute:document-7><a href=dom.html#document>Document</a></code> or null <var>expectedDocument</var>,
  perform the following steps. They throw an exception or return a boolean.</p>

  <ol><li>
    <p>If <var>element</var>'s <code id=the-popover-attribute:attr-popover-24><a href=#attr-popover>popover</a></code> attribute is in the <a href=#attr-popover-none-state id=the-popover-attribute:attr-popover-none-state-4>No Popover</a> state, then:</p>

    <ol><li><p>If <var>throwExceptions</var> is true, then throw a
     <a id=the-popover-attribute:notsupportederror href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=the-popover-attribute:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Return false.</ol>
   <li>
    <p>If any of the following are true:</p>

    <ul><li><p><var>expectedToBeShowing</var> is true and <var>element</var>'s <a href=#popover-visibility-state id=the-popover-attribute:popover-visibility-state-11>popover visibility
     state</a> is not <a href=#popover-showing-state id=the-popover-attribute:popover-showing-state-11>showing</a>; or<li><p><var>expectedToBeShowing</var> is false and <var>element</var>'s <a href=#popover-visibility-state id=the-popover-attribute:popover-visibility-state-12>popover
     visibility state</a> is not <a href=#popover-hidden-state id=the-popover-attribute:popover-hidden-state-3>hidden</a>,</ul>

    <p>then return false.</p>
   <li>
    <p>If any of the following are true:</p>

    <ul><li><p><var>element</var> is not <a id=the-popover-attribute:connected href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>;<li><p><var>element</var>'s <a id=the-popover-attribute:node-document-6 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is not <a id=the-popover-attribute:fully-active href=document-sequences.html#fully-active>fully
     active</a>;<li><p><var>expectedDocument</var> is not null and <var>element</var>'s <a id=the-popover-attribute:node-document-7 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
     document</a> is not <var>expectedDocument</var>;<li><p><var>element</var> is a <code id=the-popover-attribute:the-dialog-element-3><a href=interactive-elements.html#the-dialog-element>dialog</a></code> element and its <a id=the-popover-attribute:is-modal href=interactive-elements.html#is-modal>is modal</a>
     is set to true; or<li><p><var>element</var>'s <a id=the-popover-attribute:fullscreen-flag href=https://fullscreen.spec.whatwg.org/#fullscreen-flag data-x-internal=fullscreen-flag>fullscreen flag</a> is set,</ul>

    <p>then:</p>

    <ol><li><p>If <var>throwExceptions</var> is true, then throw an
     <a id=the-popover-attribute:invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-popover-attribute:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Return false.</ol>
   <li><p>Return true.</ol>

  <p>To get the <dfn id=auto-popover-list>showing auto popover list</dfn> for a
  <code id=the-popover-attribute:document-8><a href=dom.html#document>Document</a></code> <var>document</var>:</p>

  <ol><li><p>Let <var>popovers</var> be « ».<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-popover-attribute:list-iterate data-x-internal=list-iterate>For each</a> <code id=the-popover-attribute:element-2><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> <var>element</var> in
    <var>document</var>'s <a id=the-popover-attribute:top-layer-2 href=https://drafts.csswg.org/css-position-4/#document-top-layer data-x-internal=top-layer>top layer</a>:</p>

    <ol><li>
      <p>If all of the following are true:</p>

      <ul><li><p><var>element</var> is an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-25>HTML element</a>;<li><p><var>element</var>'s <a href=#opened-in-popover-mode id=the-popover-attribute:opened-in-popover-mode-5>opened in popover mode</a> is "<code>auto</code>"; and<li><p><var>element</var>'s <a href=#popover-visibility-state id=the-popover-attribute:popover-visibility-state-13>popover visibility state</a> is <a href=#popover-showing-state id=the-popover-attribute:popover-showing-state-12>showing</a>,</ul>

      <p>then <a href=https://infra.spec.whatwg.org/#list-append id=the-popover-attribute:list-append data-x-internal=list-append>append</a> <var>element</var> to
      <var>popovers</var>.</p>
     </ol>
   <li><p>Return <var>popovers</var>.</ol>

  <p>To get the <dfn id=showing-hint-popover-list>showing hint popover list</dfn> for a <code id=the-popover-attribute:document-9><a href=dom.html#document>Document</a></code>
  <var>document</var>:</p>

  <ol><li><p>Let <var>popovers</var> be « ».<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-popover-attribute:list-iterate-2 data-x-internal=list-iterate>For each</a> <code id=the-popover-attribute:element-3><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> <var>element</var> in
    <var>document</var>'s <a id=the-popover-attribute:top-layer-3 href=https://drafts.csswg.org/css-position-4/#document-top-layer data-x-internal=top-layer>top layer</a>:</p>

    <ol><li>
      <p>If all of the following are true:</p>

      <ul><li><p><var>element</var> is an <a href=infrastructure.html#html-elements id=the-popover-attribute:html-elements-26>HTML element</a>;<li><p><var>element</var>'s <a href=#opened-in-popover-mode id=the-popover-attribute:opened-in-popover-mode-6>opened in popover mode</a> is "<code>hint</code>"; and<li><p><var>element</var>'s <a href=#popover-visibility-state id=the-popover-attribute:popover-visibility-state-14>popover visibility state</a> is <a href=#popover-showing-state id=the-popover-attribute:popover-showing-state-13>showing</a>,</ul>

      <p>then <a href=https://infra.spec.whatwg.org/#list-append id=the-popover-attribute:list-append-2 data-x-internal=list-append>append</a> <var>element</var> to
      <var>popovers</var>.</p>
     </ol>
   <li><p>Return <var>popovers</var>.</ol>

  <p>To <dfn id=close-entire-popover-list>close entire popover list</dfn> given a <a id=the-popover-attribute:list-3 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> <var>popoverList</var>, a
  boolean <var>focusPreviousElement</var>, and a boolean <var>fireEvents</var>:</p>

  <ol><li>
    <p>While <var>popoverList</var> is not empty:</p>

    <ol><li><p>Run the <a href=#hide-popover-algorithm id=the-popover-attribute:hide-popover-algorithm-6>hide popover algorithm</a> given <var>popoverList</var>'s last item,
     <var>focusPreviousElement</var>, <var>fireEvents</var>, false, and null.</ol>
   </ol>

  <h4 id=the-popover-target-attributes><span class=secno>6.12.1</span> The popover target attributes<a href=#the-popover-target-attributes class=self-link></a></h4>

  <p><a href=forms.html#concept-button id=the-popover-target-attributes:concept-button>Buttons</a> may have the following content attributes:</p>

  <ul><li><p><dfn data-dfn-for=html-global id=attr-popovertarget data-dfn-type=element-attr><code>popovertarget</code></dfn><li><p><dfn data-dfn-for=html-global id=attr-popovertargetaction data-dfn-type=element-attr><code>popovertargetaction</code></dfn></ul>

  <p>If specified, the <code id=the-popover-target-attributes:attr-popovertarget><a href=#attr-popovertarget>popovertarget</a></code> attribute value must
  be the <a href=https://dom.spec.whatwg.org/#concept-id id=the-popover-target-attributes:concept-id data-x-internal=concept-id>ID</a> of an element with a <code id=the-popover-target-attributes:attr-popover><a href=#attr-popover>popover</a></code> attribute in the same <a id=the-popover-target-attributes:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a> as the <a href=forms.html#concept-button id=the-popover-target-attributes:concept-button-2>button</a> with the <code id=the-popover-target-attributes:attr-popovertarget-2><a href=#attr-popovertarget>popovertarget</a></code> attribute.</p>

  <p>The <code id=the-popover-target-attributes:attr-popovertargetaction><a href=#attr-popovertargetaction>popovertargetaction</a></code> attribute is an
  <a id=the-popover-target-attributes:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=html-global/popovertargetaction id=attr-popovertargetaction-toggle data-dfn-type=attr-value><code>toggle</code></dfn>
     <td><dfn id=attr-popovertargetaction-toggle-state>Toggle</dfn>
     <td>Shows or hides the targeted popover element.
    <tr><td><dfn data-dfn-for=html-global/popovertargetaction id=attr-popovertargetaction-show data-dfn-type=attr-value><code>show</code></dfn>
     <td><dfn id=attr-popovertargetaction-show-state>Show</dfn>
     <td>Shows the targeted popover element.
    <tr><td><dfn data-dfn-for=html-global/popovertargetaction id=attr-popovertargetaction-hide data-dfn-type=attr-value><code>hide</code></dfn>
     <td><dfn id=attr-popovertargetaction-hide-state>Hide</dfn>
     <td>Hides the targeted popover element.
  </table>

  <p>The attribute's <i id=the-popover-target-attributes:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-popover-target-attributes:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <a href=#attr-popovertargetaction-toggle-state id=the-popover-target-attributes:attr-popovertargetaction-toggle-state>Toggle</a> state.</p>

  <p class=note>Whenever possible ensure the popover element is placed immediately after its
  triggering element in the DOM. Doing so will help ensure that the popover is exposed in a logical
  programmatic reading order for users of assistive technology, such as screen readers.</p>

  <div class=example>
   <p>The following shows how the <code id=the-popover-target-attributes:attr-popovertarget-3><a href=#attr-popovertarget>popovertarget</a></code> attribute
   in combination with the <code id=the-popover-target-attributes:attr-popovertargetaction-2><a href=#attr-popovertargetaction>popovertargetaction</a></code>
   attribute can be used to show and close a popover:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>popovertarget</c-><c- o>=</c-><c- s>&quot;foo&quot;</c-> <c- e>popovertargetaction</c-><c- o>=</c-><c- s>&quot;show&quot;</c-><c- p>&gt;</c->
  Show a popover
<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>article</c-> <c- e>popover</c-><c- o>=</c-><c- s>&quot;auto&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;foo&quot;</c-><c- p>&gt;</c->
  This is a popover article!
  <c- p>&lt;</c-><c- f>button</c-> <c- e>popovertarget</c-><c- o>=</c-><c- s>&quot;foo&quot;</c-> <c- e>popovertargetaction</c-><c- o>=</c-><c- s>&quot;hide&quot;</c-><c- p>&gt;</c->Close<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

   <p>If a <code id=the-popover-target-attributes:attr-popovertargetaction-3><a href=#attr-popovertargetaction>popovertargetaction</a></code> attribute is not
   specified, the default action will be to toggle the associated popover. The following shows
   how only specifying the <code id=the-popover-target-attributes:attr-popovertarget-4><a href=#attr-popovertarget>popovertarget</a></code> attribute on its
   invoking button can toggle a manual popover between its opened and closed states. A manual
   popover will not respond to <a href=#popover-light-dismiss id=the-popover-target-attributes:popover-light-dismiss>light dismiss</a> or <a href=interaction.html#close-request id=the-popover-target-attributes:close-request>close requests</a>:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;button&quot;</c-> <c- e>popovertarget</c-><c- o>=</c-><c- s>&quot;foo&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Toggle the popover&quot;</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>div</c-> <c- e>popover</c-><c- o>=</c-><c- s>manual</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;foo&quot;</c-><c- p>&gt;</c->
  This is a popover!
<c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c-></code></pre>
  </div>

  <a href=dom.html#concept-element-dom id=the-popover-target-attributes:concept-element-dom>DOM interface</a>:
  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/popoverTargetElement title="The popoverTargetElement property of the HTMLButtonElement interface gets and sets the popover element to control via a button.">HTMLButtonElement/popoverTargetElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 114+</span></span><span class="safari yes"><span>Safari</span><span>17+</span></span><span class="chrome yes"><span>Chrome</span><span>114+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>114+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement title="The popoverTargetElement property of the HTMLInputElement interface gets and sets the popover element to control via an <input> element of type=&quot;button&quot;.">HTMLInputElement/popoverTargetElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 114+</span></span><span class="safari yes"><span>Safari</span><span>17+</span></span><span class="chrome yes"><span>Chrome</span><span>114+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>114+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><pre><code class='idl'><c- b>interface</c-> <c- b>mixin</c-> <dfn id='popovertargetattributes' data-dfn-type='interface'><c- g>PopoverTargetAttributes</c-></dfn> {
  [<a id='the-popover-target-attributes:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-popover-target-attributes:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- n>Element</c->? <dfn data-dfn-for='HTMLElement' id='dom-popovertargetelement' data-dfn-type='attribute'><c- g>popoverTargetElement</c-></dfn>;
  [<a id='the-popover-target-attributes:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-popovertargetaction' id='the-popover-target-attributes:dom-popovertargetaction'><c- g>popoverTargetAction</c-></a>;
};</code></pre>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/popoverTargetAction title="The popoverTargetAction property of the HTMLButtonElement interface gets and sets the action to be performed (&quot;hide&quot;, &quot;show&quot;, or &quot;toggle&quot;) on a popover element being controlled by a button.">HTMLButtonElement/popoverTargetAction</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 114+</span></span><span class="safari yes"><span>Safari</span><span>17+</span></span><span class="chrome yes"><span>Chrome</span><span>114+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>114+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction title="The popoverTargetAction property of the HTMLInputElement interface gets and sets the action to be performed (&quot;hide&quot;, &quot;show&quot;, or &quot;toggle&quot;) on a popover element being controlled by an <input> element of type=&quot;button&quot;.">HTMLInputElement/popoverTargetAction</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 114+</span></span><span class="safari yes"><span>Safari</span><span>17+</span></span><span class="chrome yes"><span>Chrome</span><span>114+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>114+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLElement id=dom-popovertargetaction data-dfn-type=attribute><code>popoverTargetAction</code></dfn> IDL attribute must
  <a id=the-popover-target-attributes:reflect href=common-dom-interfaces.html#reflect>reflect</a> the <code id=the-popover-target-attributes:attr-popovertargetaction-4><a href=#attr-popovertargetaction>popovertargetaction</a></code>
  attribute, <a id=the-popover-target-attributes:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>.</p>

  <p>To run the <dfn id=popover-target-attribute-activation-behavior>popover target attribute activation behavior</dfn> given a <code id=the-popover-target-attributes:node><a data-x-internal=node href=https://dom.spec.whatwg.org/#interface-node>Node</a></code>
  <var>node</var> and a <code id=the-popover-target-attributes:node-2><a data-x-internal=node href=https://dom.spec.whatwg.org/#interface-node>Node</a></code> <var>eventTarget</var>:</p>

  <ol><li><p>Let <var>popover</var> be <var>node</var>'s <a href=#popover-target-element id=the-popover-target-attributes:popover-target-element>popover target element</a>.<li><p>If <var>popover</var> is null, then return.<li><p>If <var>eventTarget</var> is a <a id=the-popover-target-attributes:shadow-including-inclusive-descendant href=https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-descendant data-x-internal=shadow-including-inclusive-descendant>shadow-including inclusive descendant</a> of
   <var>popover</var> and <var>popover</var> is a
   <a href=https://dom.spec.whatwg.org/#concept-shadow-including-descendant id=the-popover-target-attributes:shadow-including-descendant data-x-internal=shadow-including-descendant>shadow-including descendant</a> of <var>node</var>,
   then return.<li><p>If <var>node</var>'s <code id=the-popover-target-attributes:attr-popovertargetaction-5><a href=#attr-popovertargetaction>popovertargetaction</a></code>
   attribute is in the <a href=#attr-popovertargetaction-show id=the-popover-target-attributes:attr-popovertargetaction-show>show</a> state and
   <var>popover</var>'s <a href=#popover-visibility-state id=the-popover-target-attributes:popover-visibility-state>popover visibility state</a> is <a href=#popover-showing-state id=the-popover-target-attributes:popover-showing-state>showing</a>, then return.<li><p>If <var>node</var>'s <code id=the-popover-target-attributes:attr-popovertargetaction-6><a href=#attr-popovertargetaction>popovertargetaction</a></code>
   attribute is in the <a href=#attr-popovertargetaction-hide id=the-popover-target-attributes:attr-popovertargetaction-hide>hide</a> state and
   <var>popover</var>'s <a href=#popover-visibility-state id=the-popover-target-attributes:popover-visibility-state-2>popover visibility state</a> is <a href=#popover-hidden-state id=the-popover-target-attributes:popover-hidden-state>hidden</a>, then return.<li><p>If <var>popover</var>'s <a href=#popover-visibility-state id=the-popover-target-attributes:popover-visibility-state-3>popover visibility state</a> is <a href=#popover-showing-state id=the-popover-target-attributes:popover-showing-state-2>showing</a>, then run the <a href=#hide-popover-algorithm id=the-popover-target-attributes:hide-popover-algorithm>hide popover algorithm</a>
   given <var>popover</var>, true, true, false, and <var>node</var>.<li><p>Otherwise, if <var>popover</var>'s <a href=#popover-visibility-state id=the-popover-target-attributes:popover-visibility-state-4>popover visibility state</a> is <a href=#popover-hidden-state id=the-popover-target-attributes:popover-hidden-state-2>hidden</a> and the result of running <a href=#check-popover-validity id=the-popover-target-attributes:check-popover-validity>check popover
   validity</a> given <var>popover</var>, false, false, and null is true, then run <a href=#show-popover id=the-popover-target-attributes:show-popover>show
   popover</a> given <var>popover</var>, false, and <var>node</var>.</ol>

  <p>To get the <dfn id=popover-target-element>popover target element</dfn> given a <code id=the-popover-target-attributes:node-3><a data-x-internal=node href=https://dom.spec.whatwg.org/#interface-node>Node</a></code> <var>node</var>, perform
  the following steps. They return an <a href=infrastructure.html#html-elements id=the-popover-target-attributes:html-elements>HTML element</a> or null.</p>

  <ol><li><p>If <var>node</var> is not a <a href=forms.html#concept-button id=the-popover-target-attributes:concept-button-3>button</a>, then return
   null.<li><p>If <var>node</var> is <a href=form-control-infrastructure.html#concept-fe-disabled id=the-popover-target-attributes:concept-fe-disabled>disabled</a>, then return
   null.<li><p>If <var>node</var> has a <a id=the-popover-target-attributes:form-owner href=form-control-infrastructure.html#form-owner>form owner</a> and <var>node</var> is a <a href=forms.html#concept-submit-button id=the-popover-target-attributes:concept-submit-button>submit button</a>, then return null.<li><p>Let <var>popoverElement</var> be the result of running <var>node</var>'s <a href=common-dom-interfaces.html#attr-associated-element id=the-popover-target-attributes:attr-associated-element>get the <code>popovertarget</code>-associated
   element</a>.<li><p>If <var>popoverElement</var> is null, then return null.<li><p>If <var>popoverElement</var>'s <code id=the-popover-target-attributes:attr-popover-2><a href=#attr-popover>popover</a></code> attribute is in
   the <a href=#attr-popover-none-state id=the-popover-target-attributes:attr-popover-none-state>No Popover</a> state, then return null.<li><p>Return <var>popoverElement</var>.</ol>

  <h4 id=popover-light-dismiss><span class=secno>6.12.2</span> <dfn>Popover light dismiss</dfn><a href=#popover-light-dismiss class=self-link></a></h4>

  <p class=note>"Light dismiss" means that clicking outside of a popover whose <code id=popover-light-dismiss:attr-popover><a href=#attr-popover>popover</a></code> attribute is in the <a href=#attr-popover-auto-state id=popover-light-dismiss:attr-popover-auto-state>Auto</a> state will close the popover. This is in addition to
  how such popovers respond to <a href=interaction.html#close-request id=popover-light-dismiss:close-request>close requests</a>.</p>

  <p>To <dfn id=light-dismiss-open-popovers>light dismiss open popovers</dfn>, given a <code id=popover-light-dismiss:pointerevent><a data-x-internal=pointerevent href=https://w3c.github.io/pointerevents/#pointerevent-interface>PointerEvent</a></code>
  <var>event</var>:</p>

  <ol><li><p><a id=popover-light-dismiss:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>event</var>'s <code id=popover-light-dismiss:dom-event-istrusted><a data-x-internal=dom-event-istrusted href=https://dom.spec.whatwg.org/#dom-event-istrusted>isTrusted</a></code> attribute is true.<li><p>Let <var>target</var> be <var>event</var>'s <a href=https://dom.spec.whatwg.org/#concept-event-target id=popover-light-dismiss:concept-event-target data-x-internal=concept-event-target>target</a>.<li><p>Let <var>document</var> be <var>target</var>'s <a id=popover-light-dismiss:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>Let <var>topmostPopover</var> be the result of running <a href=#topmost-auto-popover id=popover-light-dismiss:topmost-auto-popover>topmost auto popover</a>
   given <var>document</var>.<li><p>If <var>topmostPopover</var> is null, then return.<li><p>If <var>event</var>'s <code id=popover-light-dismiss:dom-event-type><a data-x-internal=dom-event-type href=https://dom.spec.whatwg.org/#dom-event-type>type</a></code> is "<code id=popover-light-dismiss:event-pointerdown><a data-x-internal=event-pointerdown href=https://w3c.github.io/pointerevents/#the-pointerdown-event>pointerdown</a></code>", then: set <var>document</var>'s <a href=#popover-pointerdown-target id=popover-light-dismiss:popover-pointerdown-target>popover
   pointerdown target</a> to the result of running <a href=#topmost-clicked-popover id=popover-light-dismiss:topmost-clicked-popover>topmost clicked popover</a> given
   <var>target</var>.<li>
    <p>If <var>event</var>'s <code id=popover-light-dismiss:dom-event-type-2><a data-x-internal=dom-event-type href=https://dom.spec.whatwg.org/#dom-event-type>type</a></code> is "<code id=popover-light-dismiss:event-pointerup><a data-x-internal=event-pointerup href=https://w3c.github.io/pointerevents/#the-pointerup-event>pointerup</a></code>", then:</p>

    <ol><li><p>Let <var>ancestor</var> be the result of running <a href=#topmost-clicked-popover id=popover-light-dismiss:topmost-clicked-popover-2>topmost clicked popover</a>
     given <var>target</var>.<li><p>Let <var>sameTarget</var> be true if <var>ancestor</var> is <var>document</var>'s
     <a href=#popover-pointerdown-target id=popover-light-dismiss:popover-pointerdown-target-2>popover pointerdown target</a>.<li><p>Set <var>document</var>'s <a href=#popover-pointerdown-target id=popover-light-dismiss:popover-pointerdown-target-3>popover pointerdown target</a> to null.<li><p>If <var>ancestor</var> is null, then set <var>ancestor</var> to
     <var>document</var>.<li><p>If <var>sameTarget</var> is true, then run <a href=#hide-all-popovers-until id=popover-light-dismiss:hide-all-popovers-until>hide
     all popovers until</a> given <var>ancestor</var>, false, and true.</ol>
   </ol>

  <p>To find the <dfn id=topmost-clicked-popover>topmost clicked popover</dfn>, given a <code id=popover-light-dismiss:node><a data-x-internal=node href=https://dom.spec.whatwg.org/#interface-node>Node</a></code> <var>node</var>:</p>

  <ol><li><p>Let <var>clickedPopover</var> be the result of running <a href=#nearest-inclusive-open-popover id=popover-light-dismiss:nearest-inclusive-open-popover>nearest inclusive open
   popover</a> given <var>node</var>.<li><p>Let <var>targetPopover</var> be the result of running <a href=#nearest-inclusive-target-popover id=popover-light-dismiss:nearest-inclusive-target-popover>nearest inclusive target
   popover</a> given <var>node</var>.<li><p>If the result of <a href=#get-the-popover-stack-position id=popover-light-dismiss:get-the-popover-stack-position>getting the popover stack
   position</a> given <var>clickedPopover</var> is greater than the result of <a href=#get-the-popover-stack-position id=popover-light-dismiss:get-the-popover-stack-position-2>getting the popover stack position</a> given
   <var>targetPopover</var>, then return <var>clickedPopover</var>.<li><p>Return <var>targetPopover</var>.</ol>

  <p>To <dfn id=get-the-popover-stack-position>get the popover stack position</dfn>, given an <a href=infrastructure.html#html-elements id=popover-light-dismiss:html-elements>HTML
  element</a> <var>popover</var>:</p>

  <ol><li><p>Let <var>hintList</var> be <var>popover</var>'s <a id=popover-light-dismiss:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=#showing-hint-popover-list id=popover-light-dismiss:showing-hint-popover-list>showing
   hint popover list</a>.<li><p>Let <var>autoList</var> be <var>popover</var>'s <a id=popover-light-dismiss:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=#auto-popover-list id=popover-light-dismiss:auto-popover-list>showing
   auto popover list</a>.<li><p>If <var>popover</var> is in <var>hintList</var>, then return the index of
   <var>popover</var> in <var>hintList</var> + the size of <var>autoList</var> + 1.<li><p>If <var>popover</var> is in <var>autoList</var>, then return the index of
   <var>popover</var> in <var>autoList</var> + 1.<li><p>Return 0.</ol>

  <p>To find the <dfn id=nearest-inclusive-target-popover>nearest inclusive target popover</dfn> given a <code id=popover-light-dismiss:node-2><a data-x-internal=node href=https://dom.spec.whatwg.org/#interface-node>Node</a></code>
  <var>node</var>:</p>

  <ol><li><p>Let <var>currentNode</var> be <var>node</var>.<li>
    <p>While <var>currentNode</var> is not null:</p>

    <ol><li><p>Let <var>targetPopover</var> be <var>currentNode</var>'s <a href=#popover-target-element id=popover-light-dismiss:popover-target-element>popover target
     element</a>.<li><p>If <var>targetPopover</var> is not null and <var>targetPopover</var>'s <code id=popover-light-dismiss:attr-popover-2><a href=#attr-popover>popover</a></code> attribute is in the <a href=#attr-popover-auto-state id=popover-light-dismiss:attr-popover-auto-state-2>Auto</a> state or the <a href=#attr-popover-hint-state id=popover-light-dismiss:attr-popover-hint-state>Hint</a> state, and <var>targetPopover</var>'s
     <a href=#popover-visibility-state id=popover-light-dismiss:popover-visibility-state>popover visibility state</a> is <a href=#popover-showing-state id=popover-light-dismiss:popover-showing-state>showing</a>,
     then return <var>targetPopover</var>.<li><p>Set <var>currentNode</var> to <var>currentNode</var>'s ancestor in the <a id=popover-light-dismiss:flat-tree href=https://drafts.csswg.org/css-scoping/#flat-tree data-x-internal=flat-tree>flat
     tree</a>.</ol>
   </ol>


  <nav><a href=dnd.html>← 6.11 Drag and drop</a> — <a href=index.html>Table of Contents</a> — <a href=browsers.html>7 Loading web pages →</a></nav>
